<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <!--
    <style>
        h1 {
            color: red;
        }
    </style>不推荐使用-->
    <title>CSS Crash Course</title>
</head>

<body>
    <div class="container">
        <div class='box1'>
            <h1>Hello World</h1>
            <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus odio in odit, earum perspiciatis
                qui, aliquam eius inventore veniam quam architecto quos aspernatur! Eaque delectus eos harum facere.
                Laborum, numquam culpa soluta impedit atque molestias, fugit architecto, perferendis labore natus
                deleniti ipsam qui quibusdam nemo voluptatibus. Ipsam quis veritatis hic? Vitae a tempore eius iste
                veritatis mollitia assumenda cupiditate commodi quam beatae, veniam sequi ab ex doloribus, laudantium
                iusto ut eligendi voluptatem esse saepe, odio repellat dolorem placeat? Eaque eos magni explicabo. Non,
                sequi quos. Quisquam aut enim unde repudiandae. Fugiat laudantium ab reprehenderit inventore mollitia ex
                accusantium quidem dolores?</P>
        </div>
        <div class='box2'>
            <h1>Hello World</h1>
            <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus odio in odit, earum perspiciatis
                qui, aliquam eius inventore veniam quam architecto quos aspernatur! Eaque delectus eos harum facere.
                Laborum, numquam culpa soluta impedit atque molestias, fugit architecto, perferendis labore natus
                deleniti ipsam qui quibusdam nemo voluptatibus. Ipsam quis veritatis hic? Vitae a tempore eius iste
                veritatis mollitia assumenda cupiditate commodi quam beatae, veniam sequi ab ex doloribus, laudantium
                iusto ut eligendi voluptatem esse saepe, odio repellat dolorem placeat? Eaque eos magni explicabo. Non,
                sequi quos. Quisquam aut enim unde repudiandae. Fugiat laudantium ab reprehenderit inventore mollitia ex
                accusantium quidem dolores?</P>
            <button>Button</button>
        </div>
        <div class="list">
            <li><a href="#">List 1</a></li>
            <li><a href="123.abc">List 2</a></li>
            <li><a href="#">List 3</a></li>
            <li><a href="#">List 4</a></li>
            <li><a href="#">List 5</a></li>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum rerum tempora asperiores culpa dolor
                nulla amet expedita temporibus dolorum perferendis incidunt ab excepturi quo iste iure totam, neque
                sequi quasi!</p>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum rerum tempora asperiores culpa dolor
                nulla amet expedita temporibus dolorum perferendis incidunt ab excepturi quo iste iure totam, neque
                sequi quasi!</p>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum rerum tempora asperiores culpa dolor
                nulla amet expedita temporibus dolorum perferendis incidunt ab excepturi quo iste iure totam, neque
                sequi quasi!</p>
        </div>
        <div id="main-block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eos laborum suscipit, delectus facilis
                fugit quis, qui cupiditate ipsam possimus tenetur at fuga soluta alias? Fugit perferendis temporibus
                obcaecati earum.</p>
        </div>
        <div id="sidebar">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eos laborum suscipit, delectus facilis
                fugit quis, qui cupiditate ipsam possimus tenetur at fuga soluta alias? Fugit perferendis temporibus
                obcaecati earum.</p>
        </div>
        <div class="clearfix"></div>

    </div>
    <div style="margin-top:400px"></div>
    <div>
    <ul class='list2'>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <div class="position-box">
        <h1>H1</h1>
        <h2>H2</h2>
    </div>
    
    <button id = 'fixed'></button>

</div>
    <div style="margin-top:100px"></div>
</body>

</html>